<template>
	<view class="reply-list">
		<!-- 用户id为0 且 商户id 不为0 则为商家回复 -->
		<view class="info" v-if="list.user_id==0 && list.supp_id != 0">
			<image class="photo" :lazy-load="true"  :src="list.supp_img || '../static/missing-face.png'" @error="errorImage(list.supp_img)" mode="aspectFill"></image>
			<view class="other">
				<view class="user-name">
					<text class="tag" v-if="list.user_id == 0">商</text> {{list.supp_name || '未知的商户'}}
				</view>
				<view class="time">
					{{list.created | format}}
				</view>
			</view>
			<view class="reply" @click="showReply()">
				回复
			</view>
		</view>
		<view class="info" v-else>
			<image class="photo" :lazy-load="true" :src="list.himage || '../static/missing-face.png'" @error="errorImage(list.himage)" mode="aspectFill"></image>
			<view class="other">
				<view class="user-name">
					<text class="tag" v-if="list.user_id == 0">商</text> {{list.nickname || '未知的用户'}}
				</view>
				<view class="time">
					{{list.created | format}}
				</view>
			</view>
			<view class="reply" @click="showReply()">
				回复
			</view>
		</view>
		<view class="content">
			{{list.content}}
		</view>
		<view class="reply-content" v-if="list.to_user != cUserId">
			<!-- 用户id为0 且 商户id 不为0 则为回复商家 -->
			<view class="info" v-if="list.to_user==0 && list.to_supp_id != 0">
				<view class="desc">
					回复：
				</view>
				<image class="photo" :lazy-load="true" :src="list.to_supp_img || '../static/missing-face.png'" @error="errorImage(list.to_supp_img)" @ mode="aspectFill"></image>
				<view class="other">
					<view class="user-name">
						<text class="tag" v-if="list.to_user == 0">商</text> {{list.to_supp_name || '未知的商户'}}
					</view>
				</view>
			</view>
			<!-- 正常用户回复 -->
			<view class="info" v-else>
				<view class="desc">
					回复：
				</view>
				<image class="photo" :lazy-load="true" :src="list.to_himage || '../static/missing-face.png'" @error="errorImage(list.to_himage)" mode="aspectFill"></image>
				<view class="other">
					<view class="user-name">
						<text class="tag" v-if="list.to_user == 0">商</text> {{list.to_nickname || '未知的用户'}}
					</view>
				</view>
			</view>
			<!-- <view class="content">
				{{list.content}}
			</view> -->
		</view>
		<reply :show.sync="replyShow" @cancel="e=>replyShow=e" @submit="submit()" v-if="replyShow"></reply>
	</view>
</template>

<script>
	import reply from '@/components/reply.vue'
	import { dateFtt } from '@/libs/tools.js'
	export default {
		components:{
			reply
		},
		props: {
			list: {
				type: Object,
				default:()=> {
					return {}
				}
			},
			cUserId: {
				type: Number,
				default: 0
			}
		},
		filters: {
			format(e) {
				let time = new Date(e.replace(/-/g, "/"));
				return dateFtt('yyyy-MM-dd',time)
			}
		},
		data() {
			return {
				replyShow:false
			};
		},
		methods: {
			showReply() {
				this.replyShow = true
			},
			submit(e) {
				this.$emit('submit',e)
			},
			hide(e) {
				this.replyShow =false
			},
			errorImage(item) {
				console.log(item)
				this.$set(item,'../static/missing-face.png')
			},
		}
	}
</script>

<style lang="scss" scoped>
.info {
	padding: 20rpx;
	display: flex;
	.photo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	.other {
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	.user-name {
		@include overEllipsisOne;
		font-size: $uni-font-size-sm;
		color: $font-color-light;
		display: flex;
		line-height: 30rpx;
		align-items: center;
	}
	.tag {
		font-size: $uni-font-size-sm - 4rpx;
		color: #FFFFFF;
		background: #007AFF;
		border-radius: 10rpx;
		padding: 4rpx 10rpx;
		margin:0 10rpx;
	}
	.time {
		font-size: $uni-font-size-sm;
		color:$font-color-light;
		display: flex;
		line-height: 30rpx;
		align-items: center;
	}
	.reply {
		color: #007AFF;
		font-size: $uni-font-size-sm;
		display: flex;
		align-items: center;
	}
}
.content {
	padding: 0 20rpx;
	font-size: $uni-font-size-base;
	color:$uni-color-subtitle;
}
.reply-content {
	margin: 10rpx;
	background: #f8f8f8;
	border-radius: 20rpx;
	// padding-bottom: 20rpx;
	.desc {
		font-size: $uni-font-size-base;
		color:$uni-color-subtitle;
		padding-right: 10rpx;
	}
	.photo {
		width: 40rpx;
		height: 40rpx;
	}
}
</style>
